<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding:0;margin:0;}
		button{
			width:30px;
			height:50px;
			border:0;
			outline:none;
			background-color:#333;
			opacity:0.7;
			position:absolute;
		}
		#btnl{
			left:30px;
			top:130px;
		}
		#btnr{
			left:380px;
			top:130px;
		}
		div{
			width:40px;
			height:40px;
			line-height:40px;
			text-align:center;
			border-radius:50%;
			background-color:pink;
			position:absolute;
			/*left:120px;*/
			top:240px;
		}


	</style>
</head>
<body>
	<p id="did" >
		<img src="./images/11.jpg" style="display:block"  >
		<img src="./images/22.jpg" style="display:none"  >
		<img src="./images/33.jpg" style="display:none"  >
		<img src="./images/44.jpg" style="display:none"  >
		<img src="./images/55.jpg" style="display:none"  >
		<button id="btnl" onclick="func('-')" ><</button>
		<button id="btnr" onclick="func('+')" >></button>
		<div onmouseover="fun(0)" style="background-color:green" >1</div>
		<div onmouseover="fun(1)" >2</div>
		<div onmouseover="fun(2)" >3</div>
		<div onmouseover="fun(3)" >4</div>
		<div onmouseover="fun(4)" >5</div>
	</p>
</body>
	<script>
		imgs = document.getElementsByTagName("img");
		num = document.getElementsByTagName("div");
		did = document.getElementById("did");
		mytime=null;
		m=0;
		for(var i=0;i<num.length;i++){
			num[i].style.left = 120+(i*50)+"px";
		}

		function show(m){
			for(var i=0;i<imgs.length;i++){
				if(i==m){
					imgs[i].style.display="block";
					num[i].style.backgroundColor="green";
				}else{
					imgs[i].style.display="none";
					num[i].style.backgroundColor="pink";
				}
			}
		}

		function running(){
			m++;
			if(m==imgs.length){
				m=0;
			}
			show(m);
		}

		mytime = setInterval(running,1000);

		did.onmouseover=function(){
			clearInterval(mytime);
			mytime=null;
		}

		function func(b){
			switch(b){
				case "-":
					m=m-2;
					if(m<-1){
						m=3;
					}
					break;
				case "+":
					m=m;
					break;
			}
			running(m);
		}

		function fun(s){
			m=s;
			for(var i=0;i<imgs.length;i++){
				if(i==s){
					imgs[i].style.display="block";
					num[i].style.backgroundColor="green";
				}else{
					imgs[i].style.display="none";
					num[i].style.backgroundColor="pink";
				}
			}
		}



		did.onmouseout=function(){
			if(mytime==null){
				mytime=setInterval(running,1000);
			}
		}



	</script>
</html>